<template>
    <div>
        <h2>点击次数: {{ count }}</h2>
        <button v-on:click="count++">count + 1</button>
        <button @click="add">count + 1</button>


        <h2>演示事件冒泡阻止</h2>
        <a href="http://www.baidu.com" @click="handleClickByPrevent('阻止打开', $event)">百度(handleClickByPrevent)</a>
        <br/>
        <a href="http://www.baidu.com" @click.prevent="handleClick('阻止打开', $event)">百度(@click.prevent)</a>


        <h2>演示回车事件</h2>
        <input type="text" @keyup.enter="submitByEnter">

        <h2>演示阻止点击事件继续传播</h2>
        <div v-on:click="doOuter">
            <button v-on:click="doInner">单击事件往上传播</button>
        </div>

        <div v-on:click="doOuter">
            <button v-on:click.stop="doInner">阻止单击事件继续传播</button>
        </div>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                count: 0
            }
        },
        methods: {
            add() {
                this.count += 1;
            },
            /**
             * 与 @click.prevent 效果一样
             * @param msg
             * @param event
             */
            handleClickByPrevent(msg, event) {
                /**
                 * 告诉user agent：如果此事件没有被显式处理，它默认的动作也不应该照常执行。
                 * 此事件还是继续传播，除非碰到事件侦听器调用stopPropagation() 或stopImmediatePropagation()，才停止传播。
                 */
                event.preventDefault();
                window.alert(msg);
            },
            handleClick(msg, event) {
                window.alert(msg);
            },
            submitByEnter(event) {
                console.log(event.keyCode);
                alert(event.target.value)
            },
            doInner: function () {
                alert("doInner");
            },
            doOuter: function () {
                alert("doOuter");
            }
        }
    }
</script>